<template>
    <div id="backImg">
        <!-- 控制动画区域 -->
        <div class="lines" :class="{animated:isani}">
            <!-- 动画执行区域 -->
            <div class="line1 aninode" >
                <!-- 动画最小单位 -->
                <div class="twoImg topIn delay400"   v-for="(item , index) of arr1" :key="index"
                    @click="toPage1(index)"
                >
                    <div><img :src="item.imgUrl" alt=""></div>
                    <div><img :src="item.imgUrl1" alt=""></div>
                </div>
            </div>
            <div class="line2 aninode">
                <div class="twoImg topIn delay600 " v-for="(item , index) of arr2" :key="index"
                    @click="toPage2(index)"
                    @mouseover="backImg(index)"
                    @mouseleave="changeImg(index)"
                >
                    <div><img :src="item.imgUrl"  alt=""></div>
                    <div><img :src="item.imgUrl1"  alt=""></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name:'Init',
    data(){
        return{
            isani:false,
            arr1:[
                {name:'城市基建', component:'',imgUrl:'./images/jiangning/jijian.png',imgUrl1:'./images/jiangning/jj.png'},
                {name:'城市交通', component:'',imgUrl:'./images/jiangning/jiaotong.png',imgUrl1:'./images/jiangning/jt.png'},
                {name:'公共安全', component:'',imgUrl:'./images/jiangning/anquan.png',imgUrl1:'./images/jiangning/aq.png'},
                {name:'生态环境', component:'',imgUrl:'./images/jiangning/huanjing.png',imgUrl1:'./images/jiangning/hj.png'}
            ],
            arr2:[
                {name:'智慧医疗', component:'',imgUrl:'./images/jiangning/yiliao.png',imgUrl1:'./images/jiangning/yl.png'},
                {name:'社情民意', component:'',imgUrl:'./images/jiangning/minyi.png',imgUrl1:'./images/jiangning/my.png'},
                {name:'城市经济', component:'CityEconomy',imgUrl:'./images/jiangning/jingji1.png',imgUrl1:'./images/jiangning/jingj1.png'}
            ]
        }
    },
    methods:{
        toPage1(index){
            this.open2();
        },
        toPage2(index){
            if(index==2){
                this.$store.commit('getEarth','GeovisContainer');
                this.$store.commit('getComponent','');
            }else{
                this.open2();
            }
        },
        changeImg(index){
            if(index==2){
                this.arr2[2].imgUrl = './images/jiangning/jingji1.png';
                this.arr2[2].imgUrl1 = './images/jiangning/jingj1.png';
            }
        },
        backImg(index){
            if(index==2){
                this.arr2[2].imgUrl = './images/jiangning/jingji.png';
                this.arr2[2].imgUrl1 = './images/jiangning/jingj.png';
            }
        },
        open2() {
            this.$notify({
                title: '警告',
                message: '暂未开放',
                type: 'warning'
            });
        },
    },
    mounted(){
        setTimeout(()=>{
            this.isani = true
        },200)
    }
}
</script>
<style lang="stylus">
    .aninode {
        visibility: hidden;
    }
    .animated .aninode {
        visibility: visible;
    }
    .animated .topIn {
        animation: topIn;
        animation-duration: .6s;
    }
    .delay200 {
        animation-delay: 200ms!important;
        animation-fill-mode: backwards!important;
    }
    .delay400 {
        animation-delay: 500ms!important;
        animation-fill-mode: backwards!important;
    }
    .delay600 {
        animation-delay: 1500ms!important;
        animation-fill-mode: backwards!important;
    }
    .delay800 {
        animation-delay: 3800ms!important;
        animation-fill-mode: backwards!important;
    }
    @keyframes topIn {
        0%{ 
            clip-path:inset(0 0 100% 0);
            opacity: 0;
        }
        20%{ 
            clip-path:inset(0 0 80% 0);
            opacity: 0.2;
        }
        40%{
            clip-path:inset(0 0 60% 0);
            opacity: 0.4;
        }
        60%{ 
            clip-path:inset(0 0 40% 0);
            opacity: 0.6;
        }
        80%{ 
            clip-path:inset(0 0 20% 0);
            opacity: 0.8;
        }
        100% { 
            clip-path:inset(  0 0  0 0);
            opacity: 1;
        }
    }
</style>
<style scoped lang="stylus">
    @import '../../../assets/styles/varibles.styl'
    #backImg
        width: 100vw
        height: 100vh
        margin: 0
        padding: 0
        overflow: hidden
        color:#fff
        background: url('/images/jiangning/bg.png') no-repeat
        background-size:100% 100%
        .lines 
            margin-top:vw(271)
            .line1
                width:vw(1320)
                margin:0 auto
                display:flex
                justify-content: space-between
                .twoImg
                    cursor: pointer
                    width:vw(235)
                    div:nth-child(2)
                        padding-top:vh(28)
                        padding-bottom:vh(50)
                        text-align :center
            .line2
                width:vw(1320)
                margin:0 auto
                display:flex
                justify-content: space-around
                .twoImg
                    cursor: pointer
                    width:vw(235)
                    div:nth-child(2)
                        padding-top:vh(28)
                        padding-bottom:vh(50)
                        text-align :center

    
</style>

